const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    connect = require('gulp-connect')

// 使用 gulp 定制任务
// gulp.task 定制任务   
// 第一个参数 是任务的名字   第二个参数 是 任务要做什么事情
// gulp.task('a',() => {
//     // 1、找到原始文件   -- src 
//     // 2、生成新的文件   -- dist 
//     console.log("123")
// })


// 定制 html 任务 
gulp.task('html', () => {
    // 1、找到原始文件   -- src 
    gulp.src('src/**/*.html')
        //  2、对这个原始文件做一些处理
        .pipe(htmlmin({

            removeComments: true,//清除HTML注释

            collapseWhitespace: true,//压缩HTML

            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked/>

            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"

            removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"

            minifyJS: true,//压缩页面JS

            minifyCSS: true//压缩页面CSS 

        }))
        // 3、生成新的文件   -- dist 
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload())
})

//定制 css 任务
// + scss 转为 css   =>  node-sass gulp-sass
// + 压缩 css 代码
gulp.task('css', () => {
    gulp.src("src/css/**/*.scss")
        .pipe(sass())    // sass 转 CSS
        .pipe(cleanCss())          // 压缩 CSS 代码
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())

})

// 定制 js 任务
gulp.task('js', () => {
    gulp.src('src/js/**')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())   // 压缩 JS 代码
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload())

})

// 定制 图片任务
gulp.task('img', () => {
    gulp.src('src/images/**')
        .pipe(gulp.dest('dist/images'))
})


// 定制 icofont任务
gulp.task('icofont', () => {
    gulp.src('src/icofont/**')
        .pipe(gulp.dest('dist/icofont'))
})


// 定制 lib 任务
gulp.task('lib', () => {
    gulp.src('src/lib/**')
        .pipe(gulp.dest('dist/lib'))
})
// 添加 监控任务
gulp.task('watch', () => {
    gulp.watch('src/css/**', ['css'])
    gulp.watch('src/**/*.html', ['html'])
    gulp.watch('src/js/**', ['js'])
})
gulp.task('server', function () {

    connect.server({
        livereload: true,
        port: 2003,
        root: 'dist'
    });

});

// 定制 默认任务
gulp.task('default', ['html', 'css', 'js', 'img', 'lib', 'icofont','watch', 'server'])